<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      var divs = document.querySelectorAll('div');
      //解除事件监听
      //1. 传统方式
      // 元素.事件类型 =null
      divs[0].onclick = function () {
        console.log('有情人终成眷属');
        divs[0].onclick = null; //放在函数里  点击一次会打印出来 然后事件变为空  放在函数外面则会覆盖掉事件
      };

      //2.H5 高级事件绑定怎么解除
      //先申明一个变量
      var han1 = function () {
        console.log(1111);
      };
      var han2 = function () {
        console.log(2222);
      };
      //然后给divs设置点击事件 (事件类型,执行程序)
      divs[1].addEventListener('click', han1);
      divs[1].addEventListener('click', han2);
      // 元素removeEventListener(需要取消的事件类型,事件处理程序)
      //我们要针对外面要移除的是哪个事件处理程序
      divs[1].removeEventListener('click', han1); //移除了han1的点击事件
    </script>
  </body>
</html>
